<template>
    <ContentBase>
        <div class="content">
            <div style="width: 350px;">
                <div class="content-top">
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="name" style="font-weight: bold;">楼栋名</span>
                        <input type="text" class="form-control" v-model="name" placeholder="请输入楼栋名">
                    </div>
                    <div class="mb-3">
                        <label for="introduce" style="font-weight: bold;" class="form-label">简介</label>
                        <textarea class="form-control" id="introduce" v-model="introduce" placeholder="不超过20字" rows="3"></textarea>
                    </div>
                    <div style="display: flex; align-items: center;">
                        <div style="min-width: 70px; font-weight: bold;">管理员：</div>
                        <select class="form-select" aria-label="Default select example" v-model="addmin">
                            <option selected>请选择管理员</option>
                            <option :value="dormaddmin.workId" v-for="dormaddmin in dormaddmins" :key="dormaddmin.id">{{ dormaddmin.name }}</option>
                        </select>
                    </div>
                </div>
                <div class="content-bottom">
                    <div style="color: red;">{{ error_message }}</div>
                    <button type="button" class="btn btn-outline-primary" @click="clickToSubmit">提交</button>
                </div>
            </div>
        </div>
    </ContentBase>
</template>

<script setup>
import ContentBase from '@/components/ContentBase';
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const store = useStore();
const route = useRoute();
const id = route.params.id;
const records = store.state.user.records;
const current_record = ref(null);
const error_message = ref('');
for (let record of records) {
    if (record.id == id) {
        current_record.value = record;
        break;
    }
}

const name = ref(current_record.value.name);
const addmin = ref(current_record.value.addminId);
const introduce = ref(current_record.value.introduce);
const dormaddmins = ref([]);

const getDormAddminList = () => {
    $.ajax({
        url: "http://localhost:3000/api/dormaddmin/getlist",
        type: "GET",
        headers: {
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
                dormaddmins.value = resp.dormaddmins;
            }
        },
        error(resp) {
            console.log(resp);
        }
    });
}
getDormAddminList();

const clearMessage = () => {
    error_message.value = '';
}

const clickToSubmit = () => {
    error_message.value = '';

    $.ajax({
        url: "http://localhost:3000/api/sysadmin/update-building",
        type: "POST",
        data: {
            id: id,
            name: name.value,
            introduce: introduce.value,
            addminId: addmin.value
        },
        headers: {
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
                error_message.value = "提交成功";
                setTimeout(clearMessage, 4000);
            } else {
                error_message.value = resp.error_message;
                setTimeout(clearMessage, 4000);
            }
        },
        error(resp) {
            console.log(resp);
        }
    });
}

</script>

<style scoped>

.content {
    padding: 30px 0;
    display: flex;
    justify-content: center;
}

.content-top {
    margin-bottom: 20px;
}

.content-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

</style>